$(function () {
  getCategoryList()
  let EditId
  // 1 获取所有文章列表数据
  // /admin/category/list
  function getCategoryList() {
    $.ajax({
      url: 'http://localhost:8080/api/v1/admin/category/list',
      headers: {
        Authorization: localStorage.getItem('token'),
      },
      success(res) {
        if (res.code === 200) {
          const list = res.data
          // 模版引擎来渲染页面
          const html = template('trTpl', { list })
          // 渲染到页面中
          $('.category_table tbody').html(html)
        } else {
          console.log('获取失败')
          console.log('res')
        }
      },
    })
  }
  $('#myModal .btn_opt').on('click', function () {
    // 2.1 获取表单内的数据
    const name = $("[name='name']").val().trim()
    const slug = $("[name='slug']").val().trim()

    // 2.2 发送 新增请求
    $.ajax({
      url: 'http://localhost:8080/api/v1/admin/category/add',
      type: 'post',
      data: { name, slug },
      headers: {
        Authorization: localStorage.getItem('token'),
      },
      success(res) {
        if (res.code === 200) {
          // 2.3 清空表单内容
          $("[name='name']").val('')
          $("[name='slug']").val('')
          // 2.4 关闭模态框
          $('#myModal').modal('hide')
          // 2.5 刷新列表数据
          getCategoryList()
        } else {
          console.log('失败')
          console.log(res)
        }
      },
    })
  })
  $('.category_table').on('click', '.edit', function () {
    // console.log("祝老板永不脱发");
    // 1 显示编辑模态框
    $('#editModal').modal('show')
    // 2 获取被编辑的元素 将它渲染到 编辑模态框中
    // 2.1 获取被点击的数据 id   （在渲染列表数据的时候 顺便把id 也挂载到html标签的属性上 ）
    // 2.2 发送一个请求 获取id对应的对应的那条数据
    // 2.3 将那条数据 填充到编辑模态框中

    // 获取被点击的按钮 祖先元素 tr标签
    // const id = $(this).parents("tr").data("id");
    // jq对象 获取 data-id 属性的写法
    // console.log(id);

    // 2.2 获取绑定到tr标签上的那个对象数据
    const value = $(this).parents('tr').data('value')
    // 2.3 把数据 填充到编辑模态框中
    $('#name').val(value.name)
    $('#slug').val(value.slug)
    EditId = value.id
  })
  $('#editModal .btn_opt').on('click', function () {
    //  4.1 获取被编辑数据 （id如何获取会麻烦一些- 全局变量，其他很方便）
    const name = $('#name').val()
    const slug = $('#slug').val()
    // 4.2 拼接参数 发送请求 完成编辑
    $.ajax({
      url: 'http://localhost:8080/api/v1/admin/category/edit',
      type: 'post',
      data: {
        id: EditId,
        name,
        slug,
      },
      headers: {
        Authorization: localStorage.getItem('token'),
      },
      success(res) {
        if (res.code === 200) {
          // 4.3 关闭模态框
          $('#editModal').modal('hide')
          // 4.4 刷新数据
          getCategoryList()
        } else {
          console.log('失败')
          console.log(res)
        }
      },
    })
  })
})
